<template>
  <div>
    <el-row>
      <el-col :span="24" align="right">
        <div style="margin-top:10px">
          <el-button @click="addNewRecord" type="primary">添加房屋</el-button>
          <el-input style="width:200px" v-model="filters.name" placeholder="请输入屋主姓名"></el-input>
          <el-input style="width:200px" v-model="filters.address" placeholder="请输入房屋地址"></el-input>
          <el-button type="primary" icon="search" @click="getHouseInfo">搜索</el-button>
          <el-button type="primary" @click="flushAll">刷新</el-button>
        </div>
        <el-row style="margin-top:20px">
          <el-col :span="24">
            <el-table :data="list">
              <el-table-column v-for="(v,k,i) in props" :key="v.id" :label="labels[i]" align="center">
                <template scope="scope">
                  <span v-if="k=='isRental'">
                    {{scope.row[k]==1?'是':'否'}}
                  </span>
                  <span v-else>
                    {{scope.row[k]}}
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200" align="center">
                <template scope="scope">
                  <el-button type="text" @click="ckDetail(scope.row.houseID)">查看详情</el-button>
                  <el-button type="text" @click="editHouse(scope.row.houseID)">编辑</el-button>
                  <el-button type="text" @click="deleteHouse(scope.row.houseID)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="24" style="margin-top:10px" align="right">
            <el-pagination layout="prev, pager, next" :total="totalInfo" @current-change="handleCurrentChange">
            </el-pagination>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-dialog id="houseInfo" top="5%" :visible.sync="visible">
      <table class="userInfoEditTable" style="border-collapse:collapse;background-color:white;" width="100%" cellspacing="0">
        <tr v-for="(v,k,i) in houseForm" :key="v">
          <td class="tb_label">{{labels2[i]}}</td>
          <td>
            <span v-if="k=='isRental'">
              {{v==1?'是':'否'}}
            </span>
            <span v-else>
              {{v}}
            </span>
          </td>
        </tr>
        <tr>
          <td colspan="2" align="center">
            <el-button type="text" size="large" @click="printTable('houseInfo')">[打印]</el-button>
            <el-button type="text" size="large" @click="visible=false">关闭</el-button>
          </td>
        </tr>
      </table>
    </el-dialog>
  </div>
</template>

<script>
  import * as api from "@/api/realpopulation";
  export default {
    data() {
      return {
        visible: false,
        filters: {
          name: null,
          address: null,
          page: 1,
          pageSize: 10
        },
        houseForm: {

        },
        list: [{
          houseID: '', //
          houseCode: '', //              '房屋编号'
          houseAddress: '', //
          longitude: '', //              '地理经度信息',
          latitude: '', //               '地理纬度信息',
          buildingPurposeTypeValue: '', //'房屋用途’,
          houseArea: '', //              '房屋面积,单位平方米，(8,2)',
          houseCertificateType: '', //   '证件代码，编码符合GA/T 517',
          houseCertificateNumber: '', // '房屋证件号码',
          houseHolderName: '', //        '房主姓名',
          houseHolderContact: '', //     '房主联系方式，手机号码或固定电话号码',
          houseHolderPresentDetailAddress: '', //'房主现居住详细地址',
          isRental: '', //               '是否租赁？0表示否，1表示租赁',
          rentalPurposeTypeValue: '', // '出租用途类型编码',
          hiddenTroubleTypeValue: '', // '隐患类型编码',
          lesseeCertifID: '', //         '承租人公民身份证',
          lesseeName: '', //             '承租人姓名',
          lesseeContact: '', //          '承租人联系方式',
        }],
        totalInfo: 0,
        props: {
          houseCode: '', //              '房屋编号'
          houseAddress: '', //
          buildingPurposeTypeName: '', //'危险评估等级类型编码',
          houseArea: '', //              '房屋面积,单位平方米，(8,2)',
          houseHolderName: '', //        '房主姓名',
          houseHolderContact: '', //     '房主联系方式，手机号码或固定电话号码',
          isRental: '', //               '是否租赁？0表示否，1表示租赁',
        },
        labels: ["房屋编号", "房屋地址",  "房屋用途","房屋面积", "房主姓名", "房主联系方式", "是否租赁"],
        labels2: ["编号", "房屋编号", "房屋地址", "经度", "纬度", "房屋用途", "房屋面积",
          "房屋证件代码类型", "房屋证件号码", "房主姓名", "房主联系方式", "房主现住详细地址",
          "是否租赁", "出租类型编码", "隐患类型", "承租人身份证", "承租人姓名", "承租人联系方式"
        ],
      };
    },
    methods: {
      printTable(div) {
        var div_print = document.getElementById(div)
        var newStr = div_print.innerHTML
        var oldStr = document.body.innerHTML
        document.body.innerHTML = newStr
        window.print()
        window.location.reload();
        window.body.innerHTML = oldStr
        return false
      },
      goBack() {
        this.$router.go(-1)
      },
      deleteHouse(id) {
        this.$confirm("是否删除此房屋信息, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            api.deleteHouse(id).then(res => {
              if (res.data) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.getHouseInfo()
              } else {
                this.$message({
                  type: "error",
                  message: res.message
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      flushAll() {
        this.filters.name = this.filters.address = null;
        this.getHouseInfo();
      },
      handleCurrentChange(val) {
        this.filters.page = val;
        this.getHouseInfo();
      },
      ckDetail(id) {
        api.getHouseDetail(id).then(res => {
          this.houseForm = res.data
          this.visible = true
        })
      },
      addNewRecord() {
        this.$router.push("add");
      },
      GetNodeValue(val) {
        this.filters.netGridID = val;
        this.getHouseInfo();
      },
      editHouse(id) {
        this.$router.push({
          path: "edit",
          query: {
            id: id
          }
        });
      },
      getHouseInfo() {
        api.getHouseQuery(this.filters).then(res => {
          this.list = res.data.vos;
          this.totalInfo = res.data.page.totalCount;
        });
      }
    },
    mounted() {
      this.getHouseInfo();
    }
  };

</script>


<style scoped>
  .userInfoEditTable,
  .userInfoEditTable td {
    border: 1px solid darkgrey;
    padding: 10px;
  }

  .tb_label {
    width: 130px;
    text-align: right;
  }

</style>
